<template>
  <div class="container bg-gray">
    <div class="goods-info">
      <div class="goods-info-inner">
        <div class="flex">
          <div>
            <xd-img :src="detail.avatar|absUrl" class="goods-img" />
          </div>
          <div class="goods-info flex-con">
            <div class="goods-title">
              {{detail.title}}
            </div>
            <div class="flex">
              <div class="flex-con goods-num">
                × {{detail.num}}
              </div>
              <div class="goods-money">
                ￥{{detail.price}}元
              </div>
            </div>
          </div>
        </div>
      </div>
      <img src="../../assets/imgs/other/linerb.png" class="line-rb" alt="">

    </div>
    <div class="list-items">
      <div class="list-item border-b" @click="gotoRebackdetail(0)">
        <div class="flex">

          <div class="flex flex-con flex-stretch">
            <div class="icon-field">
              <img src="../../assets/imgs/other/money@2x.png" alt="">
            </div>
            <div class="flex-con">
              <div class="title">
                仅退款
              </div>
              <div class="tip">
                未收到货(包含未签收),或卖家协商同意前提下
              </div>
            </div>
          </div>
          <img src="../../assets/icons/gt3@2x.png" class="gt" alt="">
        </div>

      </div>
      <div class="list-item border-b" @click="gotoRebackdetail(1)">
        <div class="flex">
          <div class="flex flex-stretch flex-con">
            <div class="icon-field">
              <img src="../../assets/imgs/other/bankmoney@2x.png" alt="">
            </div>
            <div class="flex-con">
              <div class="title">
                退货退款
              </div>
              <div class="tip">
                已收到货,需要退换已收到的货物
              </div>
            </div>

          </div>
          <img src="../../assets/icons/gt3@2x.png" class="gt" alt="">
        </div>

      </div>

    </div>
   
  </div>
</template>

<script>
  export default {
    data() {
      return {
      
        detail: {

        }
      }
    },
    created() {
      let id = this.$route.query.id;
      if (id) {
        this.showLoading();
        this.$post('/api/bill/bill_item_detail', {
          id
        }).then(data => {
          this.detail = data;
          this.hideLoading();
        }).catch(_ => {
          this.hideLoading();
        });
      }
    },
    methods: {
      gotoRebackdetail(typeId) {
        this.$router.push('/rebackdetail?typeId=' + typeId + '&id=' + this.$route.query.id)
      }
    }
  }

</script>

<style lang="scss" scoped>
  .goods-info {
    background-color: #fff;
    position: relative;
    .goods-info-inner {
      padding: 0.4rem;
    }
    .goods-img {
      width: 2.64rem;
      height: 1.6933rem;
    }
    .goods-info {
      padding-left: 0.3333rem;
    }
    .goods-title {
      font-size: 0.3467rem;
      color: #17402a;
      padding-bottom: 0.6667rem;
    }
    .goods-num {
      font-size: 0.32rem;
      color: rgba(23, 64, 42, 0.65);
    }
    .goods-money {
      font-size: 0.32rem;
      color: #ff2a2a;
    }
  }

  .line-rb {
    width: 100%;
    display: block;
  }

  .list-items {
    padding-top: 0.28rem;
    .list-item {
      padding: 0.3467rem 0.4rem 0.4rem 0.4rem;
      background-color: #fff;
      .title {
        font-size: 0.3733rem;
        color: #222;
        padding-bottom: 0.28rem;
      }
      .tip {
        font-size: 0.32rem;
        color: #bbb;
      }
      .icon-field {
        img {
          width: 0.5467rem;
          height: 0.56rem;
          margin-right: 0.4933rem;
        }
      }
    }
  }

</style>
